<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <el-card>
      <span>批量导入赛维网络科技-A订单</span>
    </el-card>
    <el-card>
      <el-upload
        class="upload-demo"
        drag
        ref="upload"
        action="fakeaction"
        :auto-upload="true"
        :http-request="uploadFn"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传Excel文件，且不超过10MB
        </div>
      </el-upload>

      <el-button
        style="margin-left:45%;"
        size="small"
        type="success"
        @click="uploadToService"
        >上传并预览</el-button
      >
    </el-card>
    <div  v-if="showBoxResult">
      <el-card>
        <el-col :span="24" >
          <el-table :data="tableData"
                    style="width: 100%">
            <el-table-column type="index" label="序号" width="100">
            </el-table-column>
            <el-table-column prop="waybillNo" label="订单号">
            </el-table-column>
            <el-table-column label="国家">
              <template slot-scope="scope">
                <span>{{ countryMap[scope.row.countryId] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发货方式">
              <template slot-scope="scope">
                <span>{{ channelWayMap[scope.row.shippingWay] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="渠道">
              <template slot-scope="scope">
                <span>{{ instockChannelMap[scope.row.inStockChannel] }}</span>
              </template>
            </el-table-column>
            <el-table-column  label="仓库名" >
              <template slot-scope="scope">
                <span style="color: #51ABD1">{{scope.row.dispatchAddressCode}}</span>
              </template>
            </el-table-column>
            <el-table-column label="地址" >
              <template slot-scope="scope">
                <span style="color: #51ABD1">{{ shippingfbastockMap[scope.row.dispatchAddressCode] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="performancePercent" label="备注">
              <template slot-scope="scope">
                  <span style="color: #FA5776">{{ remarkMap[scope.row.dispatchAddressCode] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-button
          style="margin-left:45%;"
          size="small"
          type="success"
          @click="submitSegList"
        >上传到服务器</el-button
        >
      </el-card>
    </div>
    <el-card>
      <el-row>
        {{ errorTips }}
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import { untransform } from "@/store/yg/common/uri";
import * as constant from "@/store/yg/common/constant";
export default {
  data() {
    return {
      errorTips: "",
      fullscreenLoading: false,
      queryParams: {
        fileType: ""
      },
      countryOptions: {},
      action: "",
      feeData: [],
      fileList: [],
      showBoxResult: false,
      countryMap: {},
      channelWayMap: {},
      inStockChannelOptions: {},
      shippingfbastockMap: {},
      remarkMap: {},
      tableData: [],
      subData: {},
    };
  },
  created: function() {
    this.action =
      constant.API_SERVER +
      "/api/consume/upload?uri=" +
      untransform(this.$route.params.uri) +
      "&f=uploadForSeg&type=blank&name=sub&id=" +
      this.$store.state.edit.id;
  },

  methods: {
    uploadFn(params) {
      this.fileList.push(params);
    },
    uploadToService: function () {
      //自定义上传文件
      console.log(this.fileList);
      const form = new FormData();
      this.fileList.forEach(element => {
        const file = element.file,
          fileType = file.type,
          isImage = fileType.indexOf("pdf") !== -1,
          isLt4M = file.size / 1024 / 1024 < 4;
        form.append("items[]", file);
      });
      this.fullscreenLoading = true;
      // 文件对象
      axios({
        method: "post",
        url: this.action,
        data: form
      })
        .then(response => {
          this.fullscreenLoading = false;
          if (response.data.code === 200) {
            var data = response.data.data;
            this.showBoxResult = true;
            this.tableData = data.tableData;
            this.subData = data.orders;
            this.countryMap = data.countryMap;
            this.channelWayMap = data.channelWayMap;
            this.instockChannelMap = data.instockChannelMap;
            this.shippingfbastockMap = data.shippingfbastockMap;
            this.remarkMap = data.remarkMap;
          } else {
            this.$message.error(response.data.message);
          }
          /*if (response.data.code === 200) {
            this.errorTips = "导入成功";
            this.$message.success("导入成功!");
            this.feeData.push({
              mes: response.data.data.fileName,
              fee: response.data.data.fullFileName
            });
          } else {
            if (response.data.message) {
              this.errorTips = response.data.message;
              this.$notify.error({
                title: "错误",
                message: "上传失败!" + response.data.message
              });
            }
          }*/
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: "错误",
            message: "上传失败!"
          });
        });
    },
    submitSegList(){
      if (!this.subData){
        this.$message.error("数据为空");
        return;
      }
      this.fullscreenLoading = true;
      ajax("submitSegList", this.subData).then(
        res => {
          this.fullscreenLoading = false;
          if (res.code === 200) {
            this.errorTips = "导入成功";
            this.showBoxResult = false;
            this.tableData = [];
            this.$message.success("导入成功!");
            this.feeData.push({
              mes: res.data.fileName,
              fee: res.data.fullFileName
            });
          } else {
            if (res.message) {
              this.errorTips = res.message;
              this.$notify.error({
                title: "错误",
                message: "上传失败!" + res.message
              });
            }
          }
        },
        error => {
          console.log(error);
          this.$notify.error({
            title: "错误",
            message: "上传失败!"
          });
        }
      );
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
};
</script>
